/* Global */
body {
  margin:0;
  padding:0;
  font-family:sans-serif;
}
#wrap {
  width:100%;
  height:100%;
  background:#000;
  position:absolute;
  margin:0 auto;
  max-width:360px;
  max-height:640px;
}

/* Game */
#game,
#ui {
  position:absolute;
  width:100%;
  height:100%;
}

#game > canvas {
  position:absolute;
  width:100%;
  height:100%;
}

/* UI */
#ui > div {
  position:absolute;
  width:100%;
}
#loading {
  width:100%;
  padding-top:160px;
  font-size:36px;
  color:#fff;
  text-align:center;
}
#score {
  display:none;
  width:100%;
  padding-top:6px;
  font-size:48px;
  font-family:monospace;
  color:#fff;
  font-weight:bold;
  text-align:center;
}
#hp {
  display:none;
  top:60px;
}
#hp-bar {
  width:140px;
  height:20px;
  margin:0 auto;
  border:4px solid #000;
  border-radius:4px;
  background:#2e1700;
  position:relative;
}
#hp-value {
  background:#c20000;
  height:20px;
  position:absolute;
  left:0;
  top:0;
}
#replay {
  display:none;
  top:80px;
  text-align:center;
  vertical-align:middle;
}
#replay-button {
  margin:24px;
  padding:6px 0 12px 0;
  border:8px solid #000;
  border-radius:8px;
  color:#fff;
  font-size:36px;
  font-weight:bold;
  background:#8e4b2e;
}
#share {
  display:none;
  bottom:0;
  text-align:center;
  vertical-align:middle;
}
#share-weibo,
#share-weixin {
  margin:24px 48px;
  padding:6px 0 12px 0;
  border:8px solid #000;
  border-radius:8px;
  color:#fff;
  font-size:24px;
  font-weight:bold;
  background:#003372;
}
#share-weixin {
  display:none;
}
#share-weixin-guide {
  display:none;
  text-align:right;
  top:0;
  right:0;
  background:rgba(0, 0, 0, 0.7);
}
#debug {
  width:100%;
  font-size:16px;
  font-family:monospace;
  color:#fff;
  position:absolute;
  left:0;
  top:0;
}
#debug > p {
  margin:0;
  padding:0;
}